import { init,h } from 'snabbdom'
import  style  from 'snabbdom/modules/style'
import  eventlisteners  from 'snabbdom/modules/eventlisteners'

const patch = init([style,eventlisteners])
var list = [
    {rank: 1, name: '3test', desc: '2test'},
    {rank: 2, name: '2test', desc: '1test'},
    {rank: 3, name: '5test', desc: '5test'},
    {rank: 4, name: '4test', desc: '4test'},
    {rank: 5, name: '1test', desc: '3test'},
    {rank: 6, name: '6test', desc: '6test'},
    {rank: 7, name: '4test', desc: '4test'},
    {rank: 8, name: '1test', desc: '3test'},
    {rank: 9, name: '6test', desc: '6test'},
    {rank: 0, name: '6test', desc: '6test'},
]
const commonStyle = { display: 'inline-block', 'text-align': 'center', 'border-bottom': '1px solid #eee', 'line-height': '44px' }

var vnode = document.querySelector("#app")

const clickHandler = prop => {
    list.sort( (a, b) => {
        if (a[prop] > b[prop]) {
          return 1
        }
        if (a[prop] < b[prop]) {
          return -1
        }
        return 0
    })
    render()
}

const BodyHeader = ()=>{
    return h('div', [
        h('span', '排序方式: '),
        h('button',{
            on: {
                click: [clickHandler, 'rank']
            }
        }, '排名'),
        h('button',{
            on: {
                click: [clickHandler, 'name']
            }
        }, '名称'),
        h('button',{
            on: {
                click: [clickHandler, 'desc']
            }
        }, '描述'),
        h('button',{
            style: {
                float: 'right',
                'margin-right': '40px'
            },
            on: {
                click: [clickAddHandler]
            }
        }, 'add')
    ])
}

const ListHeader = ()=>{
    return h('div', {
        style: {
            width: '100%'
        }
    }, [
        h('span', {
            style: {
                ...commonStyle,
                width: '10%',
            }
        }, '排名'),
        h('span', {
            style: {
                ...commonStyle,
                width: '30%',
            }
        },'名称'),
        h('span', {
            style: {
                ...commonStyle,
                width: '60%',
            }
        },'描述')
    ])
}

const List = ()=>{
    return list.map((item,index)=>{
        return h('div',{
            key: item.rank
        },
        [
        h('span',{
            style: {
                ...commonStyle,
                width: '10%',
            }
        },item.rank),
        h('span',{
            style: {
                ...commonStyle,
                width: '30%',
            }
        },item.name),
        h('span',{
            style: {
                ...commonStyle,
                width: '60%',
            }
        },item.desc),
        h('button',{
            style:{
                "position":'absolute',
                "right":'20px'
            },
            on:{
                click: [clickRemoveHandler, index]
            }
        },"X")
        ])
    })
}

function view(){
    const vnode = h('div', {
        style: {
            width: '100%',
            padding: '20px'
        }
    },
    [
        h('h1','列表'),
        h('div', BodyHeader()),
        h('div', ListHeader()),
        h('div', List())
    ])
    return vnode
}
var nextKey = 11;

function clickAddHandler() {
    const item = list[Math.floor(Math.random() * 10)]
    let itemNew = {rank: nextKey++, name: item.name, desc: item.desc}
    list.push(itemNew)
    render()
}
function clickRemoveHandler(index) {
    list.splice(index, 1)
    render()
}

function render(){
    vnode = patch(vnode, view())
}
render()
